<template>
  <div class="page-container">
    <div class="control-container">
      <div class="left-panel shrink-panel" :class="isWide?'':'narrow'">
        <div class="shrink-btn-panel">
          <i :class="isWide?'el-icon-arrow-left':'el-icon-arrow-right'" @click="isWide = !isWide" />
        </div>
        <OutletTree
          v-if="isWide"
          @handleNodeClick="handleNodeClick"
        />
      </div>
      <div class="right-panel overflow-x">
        <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-form-item label="最近:">
              <el-radio-group v-model="radioData" class="search-radio-group" @change="changeRadio()">
                <el-radio :label="1">一周</el-radio>
                <el-radio :label="2">一月</el-radio>
                <el-radio :label="3">三月</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="query.startDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
              />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="query.endDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
              />
            </el-form-item>
            <el-form-item label="报警状态">
              <el-select v-model="query.alarmStatus" clearable class="w-100" placeholder="请选择">
                <el-option key="-1" value="" label="全部" />
                <el-option
                  v-for="(item) in alarmStatus"
                  :key="item.code"
                  :value="item.code"
                  :label="item.codeName"
                />
              </el-select>
            </el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form>
        </div>
        <div class="">
          <el-table
            ref="multipleTable"
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 320px)"
            :data="tableData"
          >
            <el-table-column fixed="left" align="center" type="index" width="60" />
            <el-table-column fixed="left" prop="time" label="时间" width="140" />
            <template v-for="(item,index) in tableHead">
              <el-table-column :key="index" :prop="item.prop" :label="item.label" width="120">
                <!--<template slot-scope="scope" >
                  <template v-if="index==1">
                    <template v-if="query.outletType=='e012_01'">
                      <svg-icon icon-class="wasteGas" v-bind:class="changeColor(scope.row.outletNewStatus)" ></svg-icon>
                    </template>
                    <template v-if="query.outletType=='e012_02'">
                      <svg-icon icon-class="wasteWater"  v-bind:class="changeColor(scope.row.outletNewStatus)"></svg-icon>
                    </template>
                    <span style="margin-left: 10px">{{ scope.row.outletNameT }}</span>

                  </template>
                  <template  v-else-if="(index!=0) && (index!=tableHead.length-1)  ">
                    <span style="margin-left: 10px"  v-bind:class="changeColorByDataStatus(scope.row[item.prop+'_dataStatus'])" >{{ scope.row[item.prop] }}</span>
                  </template>
                  <template v-else>
                    <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
                  </template>
                </template>-->
              </el-table-column>
            </template>
          </el-table>
          <div class="pagination-container">
            <Pagination
              v-show="query.total>0"
              :total="query.total"
              :page.sync="query.page"
              :limit.sync="query.limit"
              @pagination="initData"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OutletTree from '@/components/Tree/outletTree'
import Pagination from '@/components/Pagination'
import { getDict } from '@/utils/dict'
import { downloadFileHasFile } from '@/utils'
import { selectOverStandardDataDto, exportOverStandardDataDto } from '@/api/dataQuery/dataQuery'
import { getDatefmt } from '@/utils/common'
import { getTree } from '@/api/system/area'

export default {
  name: 'OverStandardData',
  components: {
    Pagination, OutletTree
  },
  data() {
    return {
      isWide: true,
      tableLoading: true,
      query: {
        startDate: null, endDate: null, alarmStatus: '', outletId: null,
        projectDepartmentId: null, enterpriseId: null,
        total: 0,
        page: 1,
        limit: 20
      },
      // 存储是列的属性:列的值
      tableData: [],
      tableHead: [],
      alarmStatus: [],
      radioData: 1,
      areaTree: []
    }
  },
  created() {
    this.changeRadio()
    this.alarmStatus = getDict('e002')
    this.initData()
  },
  methods: {
    initData() {
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      query.page = query.page - 1
      selectOverStandardDataDto(query).then(res => {
        this.tableHead = res.data.column
        this.query.total = res.data.page.total
        this.getAreaDatas(res.data.page.records)
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout()
          // el-table加ref="multipleTable"
        })
      }).catch(reason => {
        this.tableLoading = false
      })
    },
    handleNodeClick(data) {
      this.query = {
        ...this.query,
        outletId: null,
        projectDepartmentId: null, enterpriseId: null,
        total: 0,
        page: 1,
        limit: 20
      }
      if (data.level === 1) {
        this.query.projectDepartmentId = data.id
      } else if (data.level === 2) {
        this.query.enterpriseId = data.id
      } else if (data.level === 3) {
        this.query.outletId = data.id
      }
      this.initData()
    },
    getAreaDatas(val) {
      this.tableData = val
      getTree().then(res => {
        this.areaTree = res.data.list
        this.tableData.forEach((value, index) => {
          const areaList = this.getParentId(this.areaTree, value.region)
          this.tableData[index].province = areaList[0]
          this.tableData[index].city = areaList[1]
          this.tableData[index].county = areaList[2]
        })
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleQuery() {
      this.initData()
    },
    handleExport() {
      const query1 = JSON.parse(JSON.stringify(this.query))
      exportOverStandardDataDto(query1).then(result => {
        downloadFileHasFile(result)
      }).catch(() => {
        console.log('此处错误')
      })
    },
    changeRadio() {
      const date = new Date()
      this.query.endDate = getDatefmt(new Date(), 'yyyy-MM-dd')
      if (this.radioData === 1) {
        this.query.startDate = getDatefmt(new Date(date.setDate(date.getDate() - 7)), 'yyyy-MM-dd')
      } else if (this.radioData === 2) {
        this.query.startDate = getDatefmt(new Date(date.setMonth(date.getMonth() - 1)), 'yyyy-MM-dd')
      } else {
        this.query.startDate = getDatefmt(new Date(date.setMonth(date.getMonth() - 3)), 'yyyy-MM-dd')
      }
    },
    getParentId(data2, nodeId2) {
      var arrRes = []
      if (data2.length === 0) {
        if (nodeId2) {
          arrRes.unshift('')
        }
        return arrRes
      }
      const rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
          const node = data[i]
          if (node.areaid === nodeId) {
            arrRes.unshift(node.areaname)
            rev(data2, node.parentid)
            break
          } else {
            if (node.children) {
              rev(node.children, nodeId)
            }
          }
        }
        return arrRes
      }
      arrRes = rev(data2, nodeId2)
      return arrRes
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
